<template>
	<view class="v-home-page">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="backNav()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 卡密详情</text>
		</view>


		<view class="display-a margin-top_50rpx margin-left_16rpx">
			<view class="label" @click="getLabel(0)" :style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				全部</view>
			<view class="label" @click="getLabel(1)" :style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				未使用</view>

			<view class="label" @click="getLabel(2)" :style="selLabel == 2? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				已使用</view>





		</view>

		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">

			<view class="passwordList flex-columns margin-top_50rpx" v-for="(item,index) in cardList" :key="index">
				<view class="font-weight_bold">
					兑换码：{{item.card}}
				</view>
				<view class="flex-start-center">
					<view class="margin-right_40rpx" style="color: #2476ED;">
						状态：{{item.is_status==1?'未使用':'已使用'}}
					</view>
					<view class="flex-start-center" @click="paste(item.card)">
						<image class="copyImg" :src="copyTwo" mode=""></image>
						<text style="color: #999999;">复制卡密</text>

					</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				copyTwo: this.$imgs.copyTwo,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				selLabel: 0,
				info: {},
				cardList: [],

			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.info = JSON.parse(options.info)


		},
		computed: {


		},
		methods: {
			paste(card) {
				 console.log(card)
				uni.setClipboardData({
					data: card,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制卡密成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制卡密失败',
							icon: 'error'
						});
					}
				});
			
			
			},
			backNav() {
				this.$sun.navBack()
			},
			getLabel(index) {

				this.selLabel = index;
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},

			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.cardList,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						partner_id: uni.getStorageSync('partner_id'),
						page: scroll.num,
						psize: 10,
						log_id: this.info.id,
						// 1:未使用,2:已使用
						is_status: this.selLabel,





					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.cardList = [];
					this.cardList = this.cardList.concat(result.data.list);

					console.log(this.cardList)

				}
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		.label {
			background-color: #ECECEC;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-left: 20rpx;
		}

		.passwordList {
			width: 710rpx;
			height: 190rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);

			.copyImg {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>